<template>
	<div class="app-container foSi14">
		<div class="dis disJuB disAl">
			<p>场馆授课老师设置</p>
			<el-button type="primary" size="small" @click.stop="back" class="bac6b7">返回</el-button>
		</div>
		<el-card style="width: 100%;">
			<p>1. 对场馆授课老师称呼</p>
			<el-radio-group v-model="all_nickname_index">
				<el-radio v-for="(item,index) in all_nickname" :key="index" :value="item" :label="item"
					size="large">{{item}}</el-radio>
			</el-radio-group>
		</el-card>
		<div style="display:flex; justify-content:space-between; width:200px; margin: 0px auto; padding:40px 0px;">
			<el-button type="primary" size="small" @click.stop="baocun" class="bac6b7" style="width:80px;">
				保存
			</el-button>
			<el-button type="info" @click.stop="back" size="small" style="width:80px;">
				取消
			</el-button>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		getTeacherTitle,
		getEditTeacherTitle
	} from '@/api/venue'; // Secondary package based on el-pagination
	export default {
		components: {},
		data() {
			return {
				all_nickname: ["教练","老师","导师"],
				all_nickname_index: ""
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '员工管理',
				url: '/venue/employee',
				pd: true
			}, {
				name: '设置',
				url: '/venue/employeeSetting',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 2
			})
			this.getList()
		},
		methods: {
			getList() {
				getTeacherTitle().then(response => {
					const {
						data
					} = response
					this.all_nickname_index = data
				})
			},
			baocun(){
				getEditTeacherTitle({
					'title': this.all_nickname_index
				}).then(response => {
					const {
						data
					} = response
					this.back()
				})
			},
			back() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}

	.typelists {
		cursor: pointer;
		margin-right: 30px;
		margin-bottom: 10px;
		vertical-align: middle;
		font-size: 12px;
	}

	.typexuan {
		color: #6b7cdd;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #616b74;
		color: #fff;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr>td {
		color: #000;
	}

	/deep/.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #6b7cdd;
	}

	/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		border-color: #6b7cdd !important;
		background-color: #6b7cdd !important;
	}

	/deep/.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #6b7cdd !important;
	}

	/deep/.el-checkbox__inner:hover {
		border-color: #6b7cdd !important;
	}

	/deep/.el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #6b7cdd !important;
	}

	/deep/.el-radio__input.is-checked+.el-radio__label {
		color: #6b7cdd !important;
	}

	/deep/.el-radio__input.is-checked .el-radio__inner {
		background: #6b7cdd !important;
		border-color: #6b7cdd !important;
	}
</style>